<template>
  <div :class="['my_dialog', !visible ? 'slide_out' : '']">
    <div :class="['content', !visible ? 'slide_out' : '']">
      <div class="close">
        <span
          class="text-white hover:rotate-180 hover:bg-[blue] duration-200 text-center leading-8 w-8 h-8 rounded-full inline-block bg-theme"
          @click="closeDialog"
          >X</span
        >
      </div>
      <div class="main_content">
        <MainContent></MainContent>
      </div>
      <!-- <div class="footer" v-if="ok">
        <button @click="ok">确定</button>
      </div> -->
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "Dialog",
};
</script>
<script setup lang="ts">
import { ref } from "vue";
const props = defineProps({
  content: {
    type: [Function, String],
    default: "",
  },
  ok: {
    type: Function,
  },
});
const visible = ref(false);
const setVisible = (isVisible: any) => {
  visible.value = isVisible;
};
const MainContent: any =
  typeof props.content == "string" ? h("div", null, props.content) : props.content;
const closeDialog = () => {
  setVisible(false);
};
defineExpose({
  setVisible,
  visible,
});
</script>

<style lang="scss" scoped>
/* 定义动画效果 */
@keyframes opacity_ani {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
} /* 定义动画效果 */
@keyframes tran_top {
  from {
    transform: translateY(-100vh);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes opacity_ani_reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
} /* 定义动画效果 */
@keyframes tran_top_reverse {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100vh);
  }
}
.my_dialog {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
  z-index: 30000;
  background-color: rgba(0, 0, 0, 0.7);
  animation: opacity_ani 0.5s ease-in-out;
  &.slide_out {
    opacity: 0;
    animation: opacity_ani_reverse 0.5s ease-in-out;
  }
  .content {
    animation: tran_top 0.5s ease-in-out;
    background: white;
    &.slide_out {
      transform: translateY(-100vh);
      animation: tran_top_reverse 0.5s ease-in-out;
    }
  }
  .close {
    cursor: pointer;
    text-align: right;
    padding: 10px;
  }
}
</style>
